<template>
  <div >
    <vue-seamless-scroll  style="height:100%" class="seamless-warp" :data="alarms" :class-option="option" >
      <ul>
        <li v-for="(item, index) in alarms" :key="index" :color="item.color">
          <div  style="margin-top:5px；font-size: 14px">
            <span  style="font-size: 16px">
              {{ item.alarm_time }}
            </span>
            <br />
            <span style="font-size: 14px">
              {{ item.alarm_name }}
            </span>
            <br />
            <span>
             
            </span>
            <span v-if="item.params && item.params && item.params['reason'] "> 告警原因:{{ item.params["reason"] }} </span>
            <br />
            <span> 告警级别:{{ item.level }} </span>
            
          </div>
        </li>
      </ul>
    </vue-seamless-scroll>
  </div>
</template>
<script>
import moment from "moment";
moment.defaultFormat = "YYYY-MM-DD HH:mm:ss";
import VueSeamlessScroll from "vue-seamless-scroll";
var alarmsColor = {
  1: "red",
  2: "orange",
  3: "yellow",
  4: "blue",
};
export default {
  name:"alarm",
  components: {
    VueSeamlessScroll,
  },
  watch: {
    "$store.state.thingView.activeThing.alarms": function (alarms) {
      console.log("----------------------------");

      if (alarms) {
        alarms.forEach((a) => {
          a.alarm_time = moment.unix(a.time). format();
          a.color = alarmsColor[a.level] ? alarmsColor[a.level] : "black";
          a.info = a.alarm_time + "发生" + a.alarm_name;
        });
        this.alarms = alarms;
      }
    },
  },
  computed: {
    option() {
      return {
        hoverStop: true,
        autoPlay: true,
        step: 0.3,
      };
    },
  },
  data() {
    return {
      alarms: [],
      stop:false,
    };
  },
  methods:{
    stopRoll(){
      //this.stop = !this.stop
      this.$set(this.option,"autoPlay",false)
    }
  }
};
</script>
<style  scoped>
.seamless-warp {
  overflow: hidden;
}
</style>